<template>
<div class="IndexView">
  <div class="header">
    <RouterLink
      v-for="item in asideData.list"
      :key="item.path"
      :to="item.path">
      {{ item.meta.title }}
    </RouterLink>
  </div>
  <div class="content">
    <RouterView/>
  </div>
</div>
  

</template>

<script setup>
import { onMounted, reactive, h, ref, watch } from 'vue'
import { RouterLink, RouterView, useRouter } from 'vue-router'

const router = useRouter()
const asideData = reactive({
  current: '',
  list: router.getRoutes()?.find(item => item.path == '/home')?.children,
})
watch(() => router.currentRoute.value, () => {
  asideData.current = router.currentRoute.value.path
}, { immediate: true })



onMounted(() => {
  console.log(router.options)
})
</script>

<style lang="scss" scoped>
.IndexView {
  height: 100%;
  overflow: auto;
  & > .header {
    width: 100%;
    padding: 20px;
    position: absolute;
    z-index: 2;
    display: flex;
    flex-flow: row wrap;
    gap: 20px;
    justify-content: center;
  }
  & > .content {
    z-index: 1;
    position: fixed;
    inset: 0;
  }
}
</style>
